<template>
	<view>
		<u-navbar title="📒   知识库搜索详情" placeholder :bgColor="bgColor" :border="false" autoBack>
			<!-- <view class="search-wrap" slot="center">
				<u-search placeholder="搜索笔记" bgColor="#ffffff" :showAction="false" inputAlign="center" searchIcon=" "
					v-model="keyword"></u-search>
			</view> -->
		</u-navbar>
		<view class="scroll-wrap">
			<scroll-view class="scroll-view_H" scroll-y @scrolltolower="loadMore" :lower-threshold="50">
				<view class="knowledge-container">
					<view class="knowledge-li" v-for="(item, i) in list" :key="i" @click="goKnowledgeDetail(item)">
						<view class="top">
							<view style="font-weight: bold;">{{ item.name }}</view>
						</view>
						<view class="bottom shadow">笔记数量：{{ item.num }}</view>
					</view>
				</view>
				<!-- 加载中 -->
				<view v-if="loading" class="loading-text">加载中...</view>
				
				<!-- 没有搜索结果 -->
				<view v-else-if="!loading && noMore && list.length === 0" class="no-more-text">还没有搜索的知识库～</view>
				
				<!-- 初始加载但没有任何数据（也没有 noMore 标识） -->
				<view v-else-if="!loading && !noMore && list.length === 0" class="no-more-text">暂无知识库～</view>
			</scroll-view>
		</view>

		
		
	</view>
</template>

<script>
	import knowledgeInfo from '@/api/index.js';
	export default {
		data() {
			return {
				bgColor: "transparent",
				dataList: [1, 2, 3, 4, 5],
				list: [],
				page: 1, // 当前页码
				pageSize: 20, // 每页条数
				loading: false, // 是否正在加载
				noMore: false, // 是否没有更多数据

				name: "", // 知识库名
				combineSearch: "", // 系统用户知识库合并搜索
			};
		},

		onLoad(options) {
			const name = options.name || '';
			const combineSearch = options.combineSearch || '';
			this.name = name;
			this.combineSearch = combineSearch;
			// 使用 keyword 发起接口请求或初始化页面数据
			this.getList(); // 初始化加载数据
		},

		mounted() {
			this.getList(); // 初始化加载数据
		},
		methods: {
			
			// 跳转到知识库详情页
			goKnowledgeDetail(item){
				const paramObj = {
					id: item.id,
					name: item.name,
					type: item.knowledgeType
				}
				uni.navigateTo({
					url: './knowledgeDetail?params=' + encodeURIComponent(JSON.stringify(paramObj))
				})
			},
			
			// 获取数据
			async getList() {
				if (this.noMore || this.loading) return;
				this.loading = true;
				try {
					const queryData = {
						pageQueryDTO: {
							currentPage: this.page,
							pageSize: this.pageSize
						},
						// userId: uni.getStorageSync('userId'),
						type: uni.getStorageSync('bindType'),
						knowledgeType: 0,
						code: uni.getStorageSync('bindCode'),
						name: this.name,
						combineSearch: this.combineSearch
					}
					const res = await knowledgeInfo.getKnowledgeListApi(queryData);
					if (res.data.code == 200) {
						if (this.page === 1) {
							this.list = res.data.data?.content || [];
						} else {
							this.list = [...this.list, ...res.data.data?.content || []];
						}
						if (res.data.data?.content.length < this.pageSize) {
							this.noMore = true;
						} else {
							this.page++;
						}
					}
				} catch (error) {
					console.error("加载失败:", error);
				} finally {
					this.loading = false;
				}
			},
			// 上拉加载更多
			loadMore() {
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.scroll-wrap {
		
		.no-more-text,
		.loading-text {
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			padding: 20rpx;
			color: #999;
		}
		
		width: 100%;
		height: calc(100vh - 128rpx);

		.scroll-view_H {
			height: 100%;

			.knowledge-container {
				display: flex;
				flex-wrap: wrap;
				padding: 16px;
				box-sizing: border-box;

				.knowledge-li {
					width: calc(100% - 10px);
					margin: 5px;
					background: #fff;
					border-radius: 8px;
					overflow: hidden;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}

				.top {
					padding: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					background: #FFF9F3; // fafafa
				}

				.bottom {
					height: 70px;
					display: flex;
					justify-content: flex-end;
					padding: 10px;
				}

				.font-24 {
					font-size: 24rpx;
					color: #999;
					margin-top: 8px;
				}

				.shadow {
					box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
				}

			}
		}
	}
</style>